<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>缺陷猎手大比拼</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/style_ypp.css" />
    <link rel="stylesheet" href="css/custom_animate.css">
  </head>
  <body>
    <!-- 头 -->
    <div class="title">
      <h1><a href="../index.html">缺陷猎手大比拼</a></h1>
    </div>
    <div class="nav_bar">
      <div class="nav">

        <div class="nav_content custom-scrollbar">
          <!-- 驾驶里程统计 -->
          
          <div class="task1" style="margin-top:100px">
            <div class="s-title">
              <h3>评分结果</h3>
            </div>
            <div class="task_pos" style="width: 41.67vw; height: 31.25vw">
           
              <div id="task1" style="width: 41.67vw; height: 31.25vw"></div>
            </div>
          </div>
        
        </div>
      </div>
    </div>
  </body>
  <script src="js/jQuery.min.js"></script>
  <script type="text/javascript" src="js/echarts.min.js"></script>
  <script>
    $(document).ready(function () {
           // 第二个选项卡：实操任务得分
           var taskChart1 = echarts.init(document.getElementById("task1"));
          taskChart1.setOption(taskOption1);
          window.addEventListener("resize", taskChart1.resize);
          charts.push(taskChart1);

          var taskChart2 = echarts.init(document.getElementById("task2"));
          taskChart2.setOption(taskOption2);
          window.addEventListener("resize", taskChart2.resize);
          charts.push(taskChart2);

    });

    // 任务一
    var taskOption1 = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
        },
        formatter: function (params) {
          var tooltipHtml = '<div style="text-align: left;">';
          tooltipHtml += "<div>" + params[0].name + "</div>"; // Assuming the xAxis data is the name
          tooltipHtml += "<div>人评得分: " + params[1].value + "</div>"; // Assuming the first series is person scores
          tooltipHtml += "<div>机评得分: " + params[0].value + "</div>"; // Assuming the second series is machine scores
          tooltipHtml += "</div>";
          return tooltipHtml;
        },
      },

      legend: {
        textStyle: {
          fontSize: 16, // 设置字号
          color: "#89b5dc",
        },
        itemWidth: 12, // 设置图例标记的宽度
        itemHeight: 12, // 设置图例标记的高度
      },
      grid: {
        top: "20%", // Adjusted to top for vertical layout
        left: "10%", // Adjusted to provide space for yAxis labels
        bottom: "5%",
        containLabel: true,
      },
      yAxis: {
        type: "value", // Switched to value type for vertical display
        axisLabel: {
          color: "#89b5dc", // 横坐标轴字体颜色
          fontSize: 16, // 横坐标轴字体大小
        },
        splitLine: {
          lineStyle: {
            color: "#273550", // 纵坐标轴横线颜色
          },
        },
      },
      xAxis: {
        type: "category",
        data: [
          "匠心工班组",
          "匠艺工班组",
          "匠行工班组",
          "匠人工班组",
        ],
        axisLabel: {
          interval: 0,
          rotate: 0,
          formatter: function (value) {
            return "{value|" + value.replace("\n", "\n") + "}";
          },
          rich: {
            value: {
              color: "#89b5dc", // 设置横向坐标轴标签颜色
              fontSize: 16,
              lineHeight: 20, // 控制行高，单位为像素
              fontFamily: "Arial", // 可选，设置字体
              // 其他样式属性，如color等
            },
          },
        },
        axisLine: {
          lineStyle: {
            color: "#273550", // 横坐标轴横线颜色
          },
        },
      },
      series: [
        {
          // name: "机评得分",
          type: "bar",
          stack: "total",
          barWidth: 40,
          label: {
            show: true,
            position: "inside",
            fontSize: 14,
          },
          emphasis: {
            focus: "series",
          },
          data: [98, 94, 90, 86],
          itemStyle: {
            // 设置柱状图颜色
            color: "#e38b0d", // 人评得分的柱状图颜色
          },
        },
        // {
        //   name: "人评得分",
        //   type: "bar",
        //   stack: "total",
        //   label: {
        //     show: true,
        //     position: "inside",
        //     fontSize: 14,
        //   },
        //   emphasis: {
        //     focus: "series",
        //   },
        //   data: [52, 52, 47, 52, 52],
        //   itemStyle: {
        //     // 设置柱状图颜色
        //     color: "#e38b0d", // 机评得分的柱状图颜色
        //   },
        // },
      ],
    };
</script>
</html>
